<template>
  <div class="mid box">
    <div class="buttons">
      <el-button type="primary" size="large" @click="changeGoodsShowFlag(1)"
        >添加商品总类</el-button
      >
      <el-button type="success" size="large" @click="changeGoodsShowFlag(2)"
        >查看商品分类</el-button
      >
      <el-button type="primary" size="large" @click="changeGoodsShowFlag(3)"
        >添加商品</el-button
      >
      <el-button type="success" size="large" @click="changeGoodsShowFlag(4)"
        >查看商品</el-button
      >
    </div>
    <div class="searchBox" v-if="goodsShowFlag == 4">
      <div class="searchInner">
        <el-select
          clearable
          v-model="search.one"
          placeholder="一级类别"
          size="large"
          style="width: 8rem"
          @change="handleSearch"
        >
          <el-option
            v-for="one in goodsSearch.oneTypeList"
            :key="one.category_oneId"
            :label="one.category_oneName"
            :value="one.category_oneId"
          ></el-option>
        </el-select>
        <el-select
          clearable
          v-model="search.two"
          placeholder="二级类别"
          size="large"
          style="width: 8rem"
          :disabled="search.one === ''"
          @change="handleSearch"
        >
          <el-option
            v-for="two in data.twoList"
            :key="two.category_twoId"
            :label="two.category_twoName"
            :value="two.category_twoId"
          ></el-option>
        </el-select>
        <el-input
          v-model="search.name"
          placeholder="商品名称"
          size="large"
          style="width: 8rem"
          @change="handleSearch"
        ></el-input>
        <el-input
          v-model="search.code"
          placeholder="商品条码"
          size="large"
          style="width: 8rem"
          @change="handleSearch"
        ></el-input>
      </div>
      <el-button size="large" @click="handleSearch">搜索商品</el-button>
    </div>
  </div>
  <div class="goods-container box">
    <CategoryAdd v-if="goodsShowFlag == 1"></CategoryAdd>
    <CategoryShow v-if="goodsShowFlag == 2"></CategoryShow>
    <GoodsAdd v-if="goodsShowFlag == 3"></GoodsAdd>
    <GoodsShow v-if="goodsShowFlag == 4"></GoodsShow>
  </div>
</template>

<script setup>
import { ref, computed, reactive, watch, toRaw } from 'vue'
import { useStore } from 'vuex'
import CategoryAdd from './CategoryAdd'
import CategoryShow from './CategoryShow'
import GoodsAdd from './GoodsAdd'
import GoodsShow from './GoodsShow'
const data = reactive({
  twoList: []
})
const search = reactive({
  one: '',
  two: '',
  name: '',
  code: ''
})
const goodsShowFlag = ref(4)
const store = useStore()
const { dispatch, getters } = store
// 切换展示
const changeGoodsShowFlag = (flag) => {
  goodsShowFlag.value = flag
}
// 搜索按钮
const handleSearch = async () => {
  const s = toRaw(search)
  const data = {
    goods_code: s.code,
    goods_name: s.name,
    onetypes: [{ category_oneId: s.one }],
    twotypes: [{ category_twoId: s.two }]
  }
  dispatch('goods/getGoodsList', { data, pagination })
}
// 获取类别
const getAllTypeList = async () => {
  await dispatch('goods/getAllTypeList')
}
const goodsSearch = computed(() => getters.goodsSearch)
const pagination = computed(() => getters.goodsPagination)
watch(search, (newValue, oldValue) => {
  const result = goodsSearch.value.twoTypeList.filter((e) => {
    return e.onetypes[0].category_oneId === newValue.one
  })
  data.twoList = [...result]
  if (search.one === '') {
    search.two = ''
  }
})
getAllTypeList()
</script>

<style lang="scss" scoped>
.searchBox {
  display: flex;
  align-items: center;
  .el-button {
    margin-left: 0;
  }
}
.goods-container {
  height: 30rem;
}
</style>
